<template>
  <div class='login-container'>
    <van-nav-bar class="app-nav-bar" title="登录" left-arrow @click-left="$router.back()" />
    <!-- 使用vant自带的form表单检验和提交 -->
    <!-- 1 将外边用 van-form 包裹起来 -->
    <!-- 2 将登录的方法放置到vant格式中的 van-form 里面 -->
    <!-- 3 点击时会自动根据 rules 属性进行校验 -->
    <!-- 4 使用 Field 的 rules 属性定义校验规则。 -->
    <!-- 5 只有表单验证通过才会调用方法 -->
    <van-form ref="login-form" validate-first :show-error='false' :show-error-message='false'
      @submit="onLogin" @failed="onFailed">
      <!-- show-error v2.6.0 是否在校验不通过时标红输入框 -->
      <!-- show-error-message v2.5.8 是否在校验不通过时在输入框下方展示错误提示 -->
      <!-- validate-first 是否在某一项校验不通过时停止校验 -->
      <!-- 通过 ref 来注册组件引用信息，引用信息将会注册在父组件的$refs对象上 -->
      <van-field name="mobile" v-model="user.mobile" icon-prefix="icon" left-icon="shouji"
        placeholder="请输入手机号" :rules="formRules.mobileRules" />
      <van-field class="needChange" name="code" v-model="user.code" clearable icon-prefix="icon"
        left-icon="yanzhengma" placeholder="请输入短信验证码" :rules="formRules.codeRules">
        <template #button>
          <van-button class="send-btn" size="mini" :loading="isloading" @click.prevent="onSendSms"
            v-if="!show">发送验证码</van-button>
          <van-button class="send-btn" size="mini" disabled v-if="show">{{ time }} s</van-button>
          <!-- click.prevent 是表单中的一个默认修饰符，阻止默认行为 -->
          <!-- 添加上不会触发表单的默认行为 -->
          <!--  -->
        </template>
      </van-field>
      <div class="login-btn-wrap">
        <van-button class="login-btn" type="primary" size="large">登录</van-button>
      </div>
    </van-form>

  </div>
</template>

<script>
// 导入封装的登录模块
import { login } from '@/api/user'
// 根据文档可以不需要引入组件，使用 this.$toast 即可
// import { Toast } from 'vant'

export default {
  name: 'loginIndex',
  components: {},
  data () {
    return {
      user: {
        mobile: '17090086870', // 手机号
        code: '246810' // 验证码
      },
      formRules: {
        mobileRules: [
          { required: true, message: '请输入手机号' },
          { pattern: /^1[3|5|7|8|9]\d{9}$/, message: '请输入正确手机号' }
        ],
        codeRules: [
          { required: true, message: '请输入验证码' },
          { pattern: /^\d{6}$/, message: '请输入正确验证码' }
        ]
      },
      // 倒计时
      time: 5,
      show: false,
      // 用于判断是否点击了发送按钮
      isloading: false
    }
  },
  // 计算属性
  computed: {},
  // 监控data中的数据变化
  watch: {},
  methods: {
    // 【1】点击登录
    async onLogin () {
      // 1 显示登录中
      this.$toast.loading({
        message: '登录中...',
        // 背景是否不可点击
        forbidClick: true,
        // 展示时长(ms)，值为 0 时，toast 不会消失
        duration: 0
      })
      // 2 发送请求
      const { data } = await login(this.user)
      // 5 模拟处理响应结果
      if (data.desc === 'OK') {
        setTimeout(() => {
          this.$toast.success('登录成功')
          // 登录成功后将服务端相应结果保存到 Vuex容器 中
          this.$store.commit('setUser', data.data)
          this.$router.push('/my')
        }, 1000)
      } else {
        setTimeout(() => {
          this.$toast.fail('登录失败')
        }, 1000)
      }
    },
    // 【2】表单验证失败
    onFailed (err) {
      // 错误信息在 err 里面
      // console.log(err.errors[0].message)
      this.$toast({
        message: err.errors[0].message,
        position: top
      })
    },
    // 【3】发送验证码
    async onSendSms () {
      // 1 验证手机号码
      try {
        // 通过 $refs对象 获取表单注册信息,返回一个promise对象
        await this.$refs['login-form'].validate('mobile')
      } catch (err) {
        this.$toast({
          message: err.message,
          position: top
        })
        return
      }
      // 5 显示loading，防止用户多次点击
      this.isloading = true
      // 6 模拟慢速网络下的点击发送验证码按钮，显示loading
      setTimeout(() => {
        // 8 显示发送成功
        this.$toast({
          message: '发送成功',
          position: top
        })
        // 2 校验通过，发送验证码
        const timer = setInterval(() => {
          this.time--
          // 4 倒计时结束，显示发送按钮
          if (this.time === 0) {
            this.show = !this.show
            this.time = 60
            clearInterval(timer)
          }
        }, 1000)
        // 3 显示倒计时
        this.show = !this.show
        // 7 隐藏loading
        this.isloading = false
      }, 1000)
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () { },
  beforeCreate () { }, // 生命周期 - 创建之前
  beforeMount () { }, // 生命周期 - 挂载之前
  beforeUpdate () { }, // 生命周期 - 更新之前
  updated () { }, // 生命周期 - 更新之后
  beforeDestroy () { }, // 生命周期 - 销毁之前
  destroyed () { }, // 生命周期 - 销毁完成
  activated () { } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style scoped lang="less">
.login-container {
  .login-btn-wrap {
    padding: 26px 16px;

    .login-btn {
      background-color: #6db4fb;
      border: none;
      font-size: 15px;
    }
  }

  /* 验证码 */
  .send-btn {
    width: 76px;
    height: 23px;
    background-color: #ededed;
    border-radius: 30%;
    color: #666;
    font-size: 11px;
  }
  .needChange {
    height: 45.2px;
    display: flex;
    align-items: center;
  }
}
</style>
